<style>
    #fairy-sku-table .uploadimage{
        width: 56px !important;
        height: 56px !important;
    }
</style>
<div class="layui-tab layui-tab-card">
    <div class="layui-tab-content" style="background-color: #F0F2F5;">
        <form action="{:sysuri()}" method="post" data-auto="true" class="layui-form layui-card" data-table-id="CollectGoods" style="background-color: #F0F2F5;">

            <div class="layui-card">
                <div class="layui-card-header">基本信息</div>
                <div class="layui-card-body">
                    <div class="layui-form-item">
                        <label class="layui-form-label label-required-next">采集ID：</label>
                        <div class="layui-input-block" >
                            <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input" value="{$vo.goods_code|default=''}" disabled>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label label-required-next">货源URL：</label>
                        <div class="layui-input-block" style="display: flex;">
                            <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input" value="{$vo.collect_url|default=''}" disabled>
                            <a target="_blank" href="{$vo.collect_url|default=''}" style="width: 60px;font-size: 16px;line-height: 40px;">&nbsp;&nbsp;访 问</a>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label label-required-next">SPU：</label>
                        <div class="layui-input-block">
                            <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input" value="{$vo.spu_code|default=''}" disabled>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label label-required-next">产品标题：</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" placeholder="请输入" autocomplete="off" lay-verify="required" class="layui-input" value="{$vo.title|default=''}">
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-card" style="margin-top: 10px;">
                <div class="layui-card-header">产品图片</div>
                <div class="layui-card-body">
                    <div class="layui-form-item margin-bottom-5">
<!--                        <div class="help-label"><b>后台登录背景图片</b>Admin Background Image</div>-->
                        <div class="layui-textarea help-images">
                            <input type="hidden" value="{$vo.goods_images|default=''}" name="goods_images">
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-card" style="margin-top: 10px;">
                <div class="layui-card-header">产品规格</div>
                <div class="layui-card-body">
                    <!-- sku参数表 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">规格：</label>
                        <div class="layui-input-block">
                            <div id="fairy-spec-table"></div>
                        </div>
                    </div>

                    <!-- 动态sku表 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">SKU表：</label>
                        <div class="layui-input-block">
                            <div id="fairy-sku-table"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-card" style="margin-top: 10px;">
                <div class="layui-card-header">产品描述</div>
                <div class="layui-card-body">
                    <blockquote class="layui-elem-quote">简单描述</blockquote>
                    <textarea name="desc" placeholder="请输入内容"  rows="15" maxlength="5000" class="layui-textarea" style="white-space: nowrap;">{$vo.desc|default=''}</textarea>
                    <blockquote class="layui-elem-quote" style="margin-top: 10px;">详细描述</blockquote>
<!--                    <textarea name="detail" placeholder="请输入内容"  rows="15" maxlength="10000" class="layui-textarea"></textarea>-->
                    <textarea name="detail" placeholder="请输入内容" class="layui-textarea">{$vo.detail|default=''}</textarea>
                </div>
            </div>

            <div class="hr-line-dashed"></div>

            <div class="layui-form-item text-center">
                {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}
                <button class="layui-btn" lay-submit lay-filter="submit">{:lang("保存数据")}</button>
                {if !empty($vo.id)}<button class="layui-btn layui-btn-danger" type='button' data-confirm="{:lang('确定要取消编辑吗？')}" data-close>{:lang("取消编辑")}</button>{/if}
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                </div>
            </div>
        </form>
    </div>
</div>
{block name="script"}
<script>
    // 组图组件
    $('[name=goods_images]').uploadMultipleImage();
    // 富文本组件
    // 异步加载富文本编辑器
    require(['ckeditor'], function () {
        setTimeout(function () {
            // 初始化富文本编辑器
            window.createEditor('[name=detail]', {height: 500});
        },500)
    });

    layui.use(['form', 'skuTable'], function () {
        var form = layui.form, skuTable = layui.skuTable;
        //注意！！！ 注意！！！ 注意！！！
        //如果配置了相关接口请求的参数，请置本示例于服务器中预览，不然会有浏览器跨域问题
        //示例中的json文件仅做格式返回参考，若多次执行添加规格后再为新增后的规格添加规格值，会发现所有新增的规格都增加了该规格值。注意！此处并非是bug，原因是因为示例中返回的新增规格值id是重复的，而在正常接口请求每次返回的新增规则id是不一样的
        var obj = skuTable.render({
            //规格表容器id
            specTableElemId: 'fairy-spec-table',
            //sku表容器id
            skuTableElemId: 'fairy-sku-table',
            //sku索引分隔符
            skuNameDelimiter: ',',
            //sku表相同属性值是否合并行
            rowspan: true,
            //上传接口地址
            //接口要求返回格式为 {"code": 200, "data": {"url": "xxx"}, "msg": ""}
            uploadUrl: './json/upload.json',
            //添加规格接口地址，如果为空则表示不允许增加规格
            //接口要求返回格式为 {"code": 200, "data": {"id": "xxx"}, "msg": ""}
            specCreateUrl: './json/specCreate.json',
            //添加规格时的额外参数
            // specCreateParams: {goods_id : 888},
            //删除规格接口地址，如果为空则表示仅前端删除
            // specDeleteUrl: './json/specDelete.json',
            //添加规格值接口地址，如果为空则表示不允许增加规格值
            //接口要求返回格式为 {"code": 200, "data": {"id": "xxx"}, "msg": ""}
            specValueCreateUrl: './json/specValueCreate.json',
            //删除规格值接口地址，如果为空则表示仅前端删除
            // specValueDeleteUrl: './json/specValueDelete.json',
            //sku表格配置参数
            skuTableConfig: {
                thead: [
                    {title: '图片', icon: ''},
                    {title: 'SKU', icon: ''},
                    {title: '售价(CNY)', icon: 'layui-icon-cols'},
                    {title: '长(cm)', icon: 'layui-icon-cols'},
                    {title: '宽(cm)', icon: 'layui-icon-cols'},
                    {title: '高(cm)', icon: 'layui-icon-cols'},
                    {title: '重(克)', icon: 'layui-icon-cols'},
                    // {title: '状态', icon: ''},
                ],
                tbody: [
                    {type: 'image', field: 'image', value: '', verify: '', reqtext: ''},
                    {type: 'input', field: 'title', value: '', verify: 'required', reqtext: 'sku不能为空'},
                    {type: 'input', field: 'price', value: '0', verify: 'required|number', reqtext: '售价不能为空'},
                    {type: 'input', field: 'length', value: '0', verify: 'number', reqtext: ''},
                    {type: 'input', field: 'width', value: '0', verify: 'number', reqtext: ''},
                    {type: 'input', field: 'height', value: '0', verify: 'number', reqtext: ''},
                    {type: 'input', field: 'weight', value: '0', verify: 'number', reqtext: ''},
                    // {type: 'select', field: 'status', option: [{key: '启用', value: '1'}, {key: '禁用', value: '0'}], verify: 'required', reqtext: '状态不能为空'},
                ]
            },
            //规格数据, 一般从后台获取
            specData: {$specDataTree|raw},
            // specData: [
            //     {
            //         id: "颜色",
            //         title: "颜色",
            //         child: [
            //             {id: "红", title: "红", checked: true},
            //             {id: "黄", title: "黄", checked: false},
            //             // {id: "3", title: "蓝", checked: false}
            //         ]
            //     }, {
            //         id: "尺码",
            //         title: "尺码",
            //         child: [
            //             {id: "S", title: "S", checked: true},
            //             {id: "M", title: "M", checked: true},
            //             {id: "L", title: "L", checked: false},
            //             // {id: "XL", title: "XL", checked: false}
            //         ]
            //     },
            // ],
            //获取规格数据接口地址，如果为空或者不配置则使用 specData 参数配置
            //接口要求返回格式参考 specData.json
            // specDataUrl: './json/specData.json',
            //sku数据
            //新增的时候为空对象
            //编辑的时候可以从后台接收，会自动填充sku表，可以去掉注释看效果
            skuData: {$goods_skus_data|raw},
            // skuData: {
            //     "skus[红,S][image]": "https://www.baidu.com/img/flexible/logo/pc/result.png",
            //     "skus[红,S][title]": "88888888",
            //     "skus[红,S][price]": "200",
            //     "skus[红,S][length]": "10",
            //     "skus[红,S][width]": "10",
            //     "skus[红,S][height]": "10",
            //     "skus[红,S][weight]": "100",
            // },
            //获取SKU数据接口地址，如果为空或者不配置则使用skuData配置
            //接口要求返回格式参考 skuData.json
            // skuDataUrl: './json/skuData.json',
        });

        form.on('submit(submit)', function (data) {
            // //获取规格数据
            // console.log(obj.getSpecData());
            // //获取表单数据
            // console.log(data.field);

            data.field.specData = obj.getSpecData();

            // var state = Object.keys(data.field).some(function (item, index, array) {
            //     return item.startsWith('skus');
            // });
            // state ? layer.alert(JSON.stringify(data.field), {title: '提交的数据'}) : layer.msg('sku表数据不能为空', {icon: 5, anim: 6});

            $.ajax({
                url: "/shop/collect.Goods/edit",
                // cache: false,
                // processData: false, // 不处理数据
                // contentType: false, // 不设置内容类型
                type: 'POST',
                dataType: 'json',
                data: data.field,
                beforeSend: (res)=>{
                    indexload = layer.load(3, {
                        shade: [0.1,'#fff'] //0.1透明度的白色背景
                    });
                },
                complete: (res)=>{
                    layer.close(indexload);
                },
                success: function(res){
                    // console.log(data);
                    if(res.code == 1){
                        layer.msg(res.info, {icon: 1,time: 1000},function(){
                            layer.closeAll();
                            // location.reload()
                            layui.table.reload('CollectGoods')
                        })
                    }else{
                        layer.msg(res.info);
                    }
                },
                error: function(err){
                    // console.log(err);
                    layer.msg(err.status+err.statusText);
                }
            })

            return false;
        });
    });
</script>
{/block}